const Utils = require("./utils.js")
const {CN,EN} = require("./constant.js")

module.exports = class NumberInput{
	constructor($env,$event,setting={}){
		this.$event = $event;
		this.setting = Utils.assign({
		},setting)

		this.$dom = Utils.createDOM("div",{
			id: this.setting.id,
			class:`${this.setting.id} number-input-wrap draw-plugin-wrap`
		})
		this.__tpl = `
			<input placeholder="${this.setting.placeholder}" autofocus="autofocus" class="input-box-input" type="number" min="3" value="3" />
		`;
		this.$dom.innerHTML = this.__tpl;
		this.input = this.$dom.querySelector(".input-box-input")

		$event.emit(EN.plugin_append,this.$dom)
		
		this.bind()
	}
	bind(){
		this.input.addEventListener("change",(e)=>{
			this.$event.emit(EN.input_done,this.input.value)
		})
	}
	hide(){
		this.$dom.classList.add(CN.disabled);
	}
	show(data){
		this.$dom.classList.remove(CN.disabled);
	}
}